<template>
    <div>
        <div>
            <p>state</p>
            <p>a:{{ $store.state.mdB.b }}</p>
            <p>a:{{ b }}</p>
        </div>
        <br>
        <div>
            <p>getters</p>
            <p>doubleB:{{ $store.getters["mdB/doubleB"] }}</p>
            <p>doubleB:{{ doubleB }}</p>
        </div>
        <div>
            <p>mutations</p>
            <p><button @click="$store.commit('mdB/addB')">addB</button></p>
            <p><button @click="addB">addB</button></p>
        </div>
        <br>
        <div>
            <p>mutations</p>
            <p><button @click="$store.dispatch('mdB/addB_Async')">addB_Async</button></p>
            <p><button @click="addB_Async">addB_Async</button></p>
        </div>
    </div>
</template>

<script>
 import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';
    export default {
        name:"MdbView",
        computed: {
            // state
            ...mapState(["mdB"]), // mdB.b
            ...mapState({
                b:state=> state.mdB.b  // 生成新的计算属性赋值给b
            }),
            ...mapGetters(["mdB/doubleB"]),
            ...mapGetters({
                doubleB:"mdB/doubleB",
            })
        },
        methods:{
            ...mapMutations({
                addB:"mdB/addB"
            }),
            ...mapActions({
                addB_Async:"mdB/addB_Async"
            }),
        },
        mounted(){
            console.log("当前组件",this);
            console.log("根Store",this.$store);
        },
    }
</script>

<style lang="scss" scoped>

</style>